import React, { Component } from 'react'
import PropTypes from 'prop-types'

import './index.css'

export default class Footer extends Component {
  static propTypes={
    todos: PropTypes.array.isRequired,
    checkAll: PropTypes.func.isRequired,
    clearDone: PropTypes.func.isRequired,
  }

  handleCheckAll=(e)=>{
    this.props.checkAll(e.target.checked)
  }

  handleClearDone=()=>{
    if(this.props.todos.reduce((pre,cur)=>{return pre+(cur.done?1:0)}, 0)>0
        && window.confirm("确定要清除已完成的任务吗?")){
      this.props.clearDone()
    }
  }

  render() {
    const {todos} = this.props
    const total = todos.length
    const doneCount = todos.reduce((pre,current)=> pre+(current.done?1:0), 0)

    return (
      <div className="footer">
        <label>
          <input type="checkbox" checked={doneCount===total && total>0} onChange={this.handleCheckAll}/>
          <span>已完成{doneCount}/全部{total}</span>
        </label>
        <button className="btn btn-danger" onClick={this.handleClearDone}>清除已完成任务</button>
      </div>
    )
  }
}